<template>
  <div style="width:100%; height:90.5vh; background-color:#F2F2F2;">
    <div class="root" style="width: 80%; margin:auto; background-color:#FFFFFF;">
      <div class="type">
        <div class="button" @click="showPersonal()">个人信息</div>
        <div class="button" @click="showMedical()">电子病历</div>
      </div>
      <div class="show">
        <div id="personal">
          <div v-if="patient">
            <h2 style="font-size: 24px; color: #333; margin-bottom: 20px;">患者信息</h2>
            <div class="info-item flex">
              <div class="field">
                <label for="realName"><strong>姓名:</strong></label>
                <input type="text" id="realName" v-model="patient.realName" disabled class="input-box" />
              </div>
              <div class="field">
                <label for="gender"><strong>性别:</strong></label>
                <input type="text" id="gender" v-model="patient.gender" disabled class="input-box" />
              </div>
              <div class="field">
                <label for="age"><strong>年龄:</strong></label>
                <input type="text" id="age" v-model="patient.age" disabled class="input-box" />
              </div>
              <div class="field">
                <label for="occupationId"><strong>职业:</strong></label>
                <input type="text" id="occupationId" v-model="patient.occupationId" disabled class="input-box" />
              </div>
              <div class="field">
                <label for="ethnicId"><strong>民族:</strong></label>
                <input type="text" id="ethnicId" v-model="patient.ethnicId" disabled class="input-box" />
              </div>
            </div>
            <div class="info-item flex">
              <div class="field" style="flex: 1; padding-right: 10px;">
                <label for="idCardNumber"><strong>证件号码:</strong></label>
                <input type="text" id="idCardNumber" v-model="patient.idCardNumber" disabled class="input-box" />
              </div>
              <div class="field" style="flex: 1; padding-right: 10px;">
                <label for="phoneNumber"><strong>手机号:</strong></label>
                <input type="text" id="phoneNumber" v-model="patient.phoneNumber" disabled class="input-box" />
              </div>
              <div class="field" style="flex: 1;">
                <label for="address"><strong>地址:</strong></label>
                <input type="text" id="address" v-model="patient.address" disabled class="input-box" />
              </div>
            </div>


          </div>
          <div v-else>
            <p style="text-align: center; color: #999;">加载中...</p>
          </div>
        </div>
        <div id="medical" style="display: none;">
          <p>这是电子病历的内容。</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="History">

import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router'; // 引入 useRoute 来获取路由信息
import axios from 'axios';
import Cookies from 'js-cookie';
const TokenKey = 'Admin-Token';
const token = Cookies.get(TokenKey);

// 获取路由参数
const route = useRoute();
const patientId = route.query.patientId; // 从路由的 query 中获取 patientId

// 初始化 patient 对象
const patient = ref(null);

// 使用 onMounted 生命周期钩子发起请求
onMounted(() => {
  if (patientId) {
    axios.get(`http://localhost:8888/sn/doctor/patient/${patientId}`, {
      headers: {
        Authorization: token
      }
    })
        .then((response) => {
          patient.value = response.data;
          console.log(response.data);  // 你可以根据需要处理返回的数据
        })
        .catch((error) => {
          console.error('获取患者信息失败:', error);
        });
  } else {
    console.error('没有找到患者ID');
  }
});




// 默认显示个人信息内容
window.onload = function() {
  showPersonal();
};

// 显示个人信息内容
function showPersonal() {
  // 隐藏电子病历内容
  document.getElementById('medical').style.display = 'none';
  // 显示个人信息内容
  document.getElementById('personal').style.display = 'block';
}

// 显示电子病历内容
function showMedical() {
  // 隐藏个人信息内容
  document.getElementById('personal').style.display = 'none';
  // 显示电子病历内容
  document.getElementById('medical').style.display = 'block';
}



</script>

<style scoped>
/* 按钮样式 */
.button {
  display: inline-block;
  padding: 10px 20px;
  margin: 10px;
  background-color: #409EFF; /* 绿色背景 */
  color: white;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  border: none;
  border-radius: 5px; /* 圆角 */
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
}

/* 鼠标悬停时的效果 */
.button:hover {
  background-color: #409EFF;
  transform: scale(1.05); /* 放大效果 */
}

/* 鼠标按下时的效果 */
.button:active {
  background-color: #409EFF;
  transform: scale(0.98); /* 缩小效果 */
}

/* 已激活按钮样式 */
.button.active {
  background-color: red;
}
.root {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 30px;
}

h2 {
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
}

.info-item {
  margin: 15px 0;
  font-size: 16px;
  color: #555;
}

.flex {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  gap: 20px; /* 字段之间的间距 */
}

.field {
  width: 18%;  /* 控制每个输入框的宽度 */
}

label {
  display: inline-block;
  width: 80px;
  font-weight: bold;
  color: #333;
}

.input-box {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  color: #555;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
  margin-left: 10px;
  box-sizing: border-box;
  cursor: not-allowed;
}

.input-box:disabled {
  background-color: #eaeaea;
}
.container {
  display: flex;
  justify-content: space-between;
}

.left-panel,
.right-panel {
  width: 48%;
}

h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

.selected-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.selected-item input {
  width: 60px;
  margin-left: 10px;
  padding: 5px;
}

.item-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #f9f9f9;
  margin-bottom: 10px;
  border-radius: 5px;
}


</style>